<!DOCTYPE HTML>
<html>
	<head>
		<title>CSS选择器</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			/* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */
			body,
			input {
				font-size: 18px;
			}

			input {
				border: 2px solid green;
			}

			div,
			span,
			p {
				border: 2px solid red;
				font-size: 18px;
			}

			span {
				border-color: blue;
				margin-right: 10px;
			}

			div,
			p {
				width: 350px;
				height: 80px;
				padding: 5px;
			}

			/* ----- 1.标签名选择器练习 ----- 
				将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
			span {
				background: #efbdef;
				font-size: 22px;
				font-weight: bold;
			}

			/* ----- 2.类选择器练习 ----- 
				(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
				(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
				#ec0e7e；*/
			/* 匹配所有class值为s1的元素 */
			.s1 {
				background: #faf77b;
				border: 2px solid cyan;
			}

			/* 匹配所有class值为s2的元素 */
			.s2 {
				background: #5eff1e;
				color: #ec0e7e;
			}

			span {
				background: red;
				/* class选择器的优先级高于元素选择器 */
			}

			/* ----- 3.id选择器练习 -----
				用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
			#p1 {
				font-size: 24px;
				color: #a06649;
				text-indent: 20px;
			}

			/* ----- 4.后代选择器练习 ----- 
				为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
			p span {
				font-size: 18px;
				color: red;
				background: pink;
			}

			/* ----- 5.属性选择器 ----- 
				为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
			input[type="text"] {
				background: #FF7CCC;
				font-size: 22px;
				text-indent: 15px;
			}
		</style>
	</head>
	<body>
		<br />
		<div>
			div111
			<span class="s2">这是一个span</span>
			这是一个div
		</div> <br />

		<!-- class值相同的则为一组，或者是一类 -->
		<!-- 多个类加空格 -->
		<span class="s1 s2">span111</span>
		<span class="s1">span222</span>
		<span class="s1">span333</span>

		<p id="p1">
			ppp111
			<span>这是一个span</span>
			这是一个P元素
		</p>
		<p>
			ppp222
			<span>这是一个span</span>
			这是一个P元素
		</p>
		<input type="text" value="用户名" />
		<input type="button" value="按钮1" />
		<input type="button" value="按钮2" />
	</body>
</html>
